﻿<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
    <script src="js/jstools.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/raphael.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery/jquery.progressbar.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery/jquery.asyncqueue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/Color.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/Polyline.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ActivityImpl.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ActivitiRest.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/LineBreakMeasurer.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ProcessDiagramGenerator.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ProcessDiagramCanvas.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css" media="screen">

    </style>
</head>

<body>
    <div class="wrapper">
        <div id="pb1"></div>
        <div id="overlayBox">
            <div id="diagramBreadCrumbs" class="diagramBreadCrumbs" onmousedown="return false" onselectstart="return false"></div>
            <div id="diagramHolder" class="diagramHolder"></div>
            <div class="diagram-info" id="diagramInfo"></div>
        </div>
    </div>
    <script language='javascript'>
        var DiagramGenerator = {};
        var pb1;
        $(document).ready(function() {
            var query_string = {};
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                query_string[pair[0]] = pair[1];
            }

            var processDefinitionId = query_string["processDefinitionId"];
            var processInstanceId = query_string["processInstanceId"];

            console.log("Initialize progress bar");

            pb1 = new $.ProgressBar({
                boundingBox: '#pb1',
                label: 'Progressbar!',
                on: {
                    complete: function() {
                        console.log("Progress Bar COMPLETE");
                        this.set('label', 'complete!');
                        if (processInstanceId) {
                            ProcessDiagramGenerator.drawHighLights(processInstanceId);
                        }
                    },
                    valueChange: function(e) {
                        this.set('label', e.newVal + '%');
                    }
                },
                value: 0
            });
            console.log("Progress bar inited");

            ProcessDiagramGenerator.options = {
                diagramBreadCrumbsId: "diagramBreadCrumbs",
                diagramHolderId: "diagramHolder",
                diagramInfoId: "diagramInfo",
                on: {
                    click: function(canvas, element, contextObject) {
                        var mouseEvent = this;
                        console.log("[CLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);

                        if (contextObject.getProperty("type") == "callActivity") {
                            var processDefinitonKey = contextObject.getProperty("processDefinitonKey");
                            var processDefinitons = contextObject.getProperty("processDefinitons");
                            var processDefiniton = processDefinitons[0];
                            console.log("Load callActivity '" + processDefiniton.processDefinitionKey + "', contextObject: ", contextObject);

                            ProcessDiagramGenerator.drawDiagram(processDefiniton.processDefinitionId);
                        }
                    },
                    rightClick: function(canvas, element, contextObject) {
                        var mouseEvent = this;
                        console.log("[RIGHTCLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
                    },
                    over: function(canvas, element, contextObject) {
                        var mouseEvent = this;

                        // TODO: show tooltip-window with contextObject info
                        ProcessDiagramGenerator.showActivityInfo(contextObject);
                    },
                    out: function(canvas, element, contextObject) {
                        var mouseEvent = this;
                        ProcessDiagramGenerator.hideInfo();
                    }
                }
            };

            var baseUrl = window.document.location.protocol + "//" + window.document.location.host + "/";
            var shortenedUrl = window.document.location.href.replace(baseUrl, "");
            baseUrl = baseUrl + shortenedUrl.substring(0, shortenedUrl.indexOf("/"));

            ActivitiRest.options = {
                processInstanceHighLightsUrl: baseUrl + "/service/process-instance/{processInstanceId}/highlights?callback=?",
                processDefinitionUrl: baseUrl + "/service/process-definition/{processDefinitionId}/diagram-layout?callback=?",
                processDefinitionByKeyUrl: baseUrl + "/service/process-definition/{processDefinitionKey}/diagram-layout?callback=?"
            };

            if (processDefinitionId) {
                ProcessDiagramGenerator.drawDiagram(processDefinitionId);

            } else {
                alert("processDefinitionId parameter is required");
            }
        });
    </script>
</body>

</html>